<template>
  <ul>
    <li v-for="d in list" :key="d.id" :class="{'active':d.id == active}" @click="selectFn(d)">
      {{d.name}}
      <span>
        <i class="el-icon-edit" @click="editFn(d)"></i>
        <i class="el-icon-delete" @click="delFn(d)"></i>
      </span>
    </li>
  </ul>
</template>

<script>
  export default {
    name: "CateUlList",
    props: ['list','active','selectFn','editFn','delFn'],
    methods: {
      selectCate(cate) {

      }
    }
  }
</script>

<style lang="scss" scoped>
  ul {
    list-style: none;
    margin: 0;
    padding: 0;

    li {
      height: 50px;
      line-height: 50px;
      text-align: left;
      font-size: 16px;
      padding-left: 20px;

      span {
        float: right;
        margin-right: 10px;
        i{
          margin-right: 15px;
          cursor: pointer;
        }
      }
    }
    li:hover{
      background-color: #e8f3f5;
    }
    .active{
      color: #14889A;
    }
  }
</style>
